<template>
  <div class="student-manage">
    <el-card class="search-bar">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="searchParams.name" placeholder="学员姓名" clearable />
        </el-col>
        <el-col :span="8">
          <el-select v-model="searchParams.subject" placeholder="学习科目" clearable>
            <el-option label="科目一" value="1"></el-option>
            <el-option label="科目二" value="2"></el-option>
            <el-option label="科目三" value="3"></el-option>
            <el-option label="科目四" value="4"></el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="searchStudents">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-table :data="students" stripe style="width: 100%">
      <el-table-column prop="studentId" label="学员ID" width="120"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80">
        <template slot-scope="{ row }">
          {{ row.gender === '男' ? '♂' : '♀' }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系电话"></el-table-column>
      <el-table-column label="当前进度">
        <template slot-scope="{ row }">
          <el-progress 
            :percentage="row.progress" 
            :status="getProgressStatus(row.progress)"
            :format="formatProgress"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="viewDetail(row)">详情</el-button>
          <el-button size="mini" @click="contactStudent(row)">联系</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="total, prev, pager, next"
      :total="total"
      :current-page="currentPage"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
// import axios from 'axios';

export default {
  data() {
    return {
      students: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      searchParams: {
        name: '',
        subject: ''
      }
    };
  },
  created() {
    this.fetchStudents();
  },
  methods: {
    async fetchStudents() {
      try {
        // 实际开发中替换为真实API
        // const response = await axios.get('/api/coach/students', {
        //   params: {
        //     page: this.currentPage,
        //     per_page: this.pageSize,
        //     ...this.searchParams
        //   }
        // });
        
        // 模拟数据
        this.students = [
          {
            studentId: 'S1001',
            name: '王小明',
            gender: '男',
            phone: '13812345678',
            progress: 65,
            currentSubject: '科目二'
          },
          {
            studentId: 'S1002',
            name: '李小红',
            gender: '女',
            phone: '13987654321',
            progress: 85,
            currentSubject: '科目三'
          }
        ];
        this.total = this.students.length;
      } catch (error) {
        console.error('获取学员数据失败:', error);
      }
    },
    formatProgress(percentage) {
      return `${percentage}%`;
    },
    getProgressStatus(percentage) {
      if (percentage >= 90) return 'success';
      if (percentage >= 60) return 'primary';
      return 'exception';
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchStudents();
    },
    searchStudents() {
      this.currentPage = 1;
      this.fetchStudents();
    },
    resetSearch() {
      this.searchParams = {
        name: '',
        subject: ''
      };
      this.fetchStudents();
    },
    viewDetail(student) {
      console.log('查看学员详情:', student);
      // 实际开发中跳转到详情页或打开详情弹窗
    },
    contactStudent(student) {
      console.log('联系学员:', student);
      // window.location.href = `tel:${student.phone}`;
    }
  }
};
</script>

<style scoped>
.student-manage {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>